<template>
  <div class="sys_wrapper">
    <div class="sys_inner" style="padding: 30px;">


      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <div class="add_feature_wrapper">
          <div class="add_feature_inner">
            <el-form-item label="特征">
              <el-select style="width: 100%;" v-model="sys_features_setting" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
                <el-option v-for="item in sys_features" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="添加特征" style="">
              <div class="add_feature_wrapper">
                <div class="add_feature_inner" style="display: flex;">
                  <el-input placeholder="请输入内容" v-model="feature_input" clearable style="margin-right: 0px;"></el-input>
                  <div style="padding-left: 10px;">
                    <el-button type="primary" icon="el-icon-edit" circle @click="addFeature"></el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" icon=""  style="width: 100%;" @click="changeFeatures">确定修改</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>

    </div>
  </div>
</template>

<script>
  import {postRequest} from "../utils/api";
  import {mapGetters, mapState} from 'vuex';
  export default {
      name: "SysSetting",
      computed:{
        ...mapState(['sys_features']),
        ...mapGetters({asd:'inc_inc'})
      },
      data(){
        return {
          sys_features_setting: [],
          feature_input: '',
        }
      },
      methods: {
        addFeature(){
          if (this.feature_input != ''){
            this.sys_features_setting.push(this.feature_input)
            this.feature_input = ''
          }
        },
        changeFeatures(){
          let param = {
            features: this.sys_features_setting,
            token: window.localStorage.getItem("token")
          }
          postRequest('/feature_consumer/changeSysFeatures', param).then(res=>{
            console.debug("正常返回："+JSON.stringify(res))
            this.$message({showClose: true, message: "修改系统特征成功", type: 'success'})
            this.getSysFeatures()
          }).catch(err=>{
            console.debug("请求错误返回："+JSON.stringify(err))
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
          })
        },
        getSysFeatures(){
          var token = window.localStorage.getItem("token")
          let param = {
            token: token
          }
          postRequest("feature_consumer/getSysFeatures", param).then(res=>{
            console.debug("正常返回 res:"+JSON.stringify(res))
            this.$message({showClose:true, message: "获取系统特征成功", type: 'success'})
            this.$store.commit("setSysFeatures", res.data.t)
          }).catch(err=>{
            console.debug("错误返回 err："+JSON.stringify(err))
            this.$message({showClose:true, message: JSON.stringify(err), type: 'err'})
          })
        }
      },
      watch: {
        sys_features(newv, oldv){
          this.sys_features_setting = []
          for(var i = 0; i < newv.length;i++){
            console.debug("newv item"+newv[i])
            this.sys_features_setting.push(newv[i])
          }
        }
      },
      mounted() {
        this.sys_features_setting = []
        var store_features = this.sys_features
        console.debug("store_features:"+JSON.stringify(this.sys_features))
        for(var i = 0; i < store_features.length;i++){
          console.debug("store_features item"+store_features[i])
          this.sys_features_setting.push(store_features[i])
        }
      }
  }
</script>

<style scoped>

</style>
